<template>
    <el-dialog
        v-model="state.dialogFormVisible"
        width="50%"
        :z-index="9"
    >
        <template #header>
			<div class="custom-header">回复</div>
		</template>
        <el-form :model="state.form" ref="ruleFormRef" :rules="rules">
            <el-form-item prop="name" label="问卷名称" label-width="110px">
                {{ state.form.name }}
            </el-form-item>
            <el-form-item prop="name" label="问卷描述" label-width="110px">
                {{ state.form.name }}
            </el-form-item>
            <el-form-item prop="name" label="问卷类型" label-width="110px">
                {{ state.form.name }}
            </el-form-item>
            <el-form-item prop="name" label="问卷回复" label-width="110px">
                <el-input v-model="state.form.name" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="name" label="回复人" label-width="110px">
                <el-input v-model="state.form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="name" label="回复所在单位" label-width="110px">
                <el-input v-model="state.form.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="state.dialogFormVisible = false">回复</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
  name: string
  region: string
}
const state = reactive({
    form: {
        name:"",
        region: "",
    },
    dialogFormVisible: false
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
        },
    ],
})
const emit = defineEmits(['', '']);
const init = () => {
    state.dialogFormVisible = true
}
defineExpose({
	init
})
</script>

<style scoped>
.dialog-footer {
    padding-bottom: 20px;
}
</style>